<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作:针对css3、添加、移除、切换的元素"类名"
		     addClass()   有参：1个参和多个参
			              语法：addClass("类名")
						  <p class="类名">
						  语法：addClass("类名1 类名2");
						  功能：匹配元素集合中的所有元素
						       添加一个或者多个类名操作
						  理解：元素添加存在的样式	   
			              
			 removeClass()  功能：匹配元素集合中的所有元素
						       移除一个或者多个类名操作
			 toggleClass()  功能：如果元素有类名移除，没有则添加
			 hasClass()     功能：检查匹配元素集合中是否包含指定类名
			                  返回值boolean
							  
		-->
		<!-- 要求：1.jq引入
		          2.html：   div  id="targetElement" 
							4个按钮    id="addClassBtn"
							          id="removeClassBtn"
									  id="toggleClassBtn"
									  id="hasClassBtn"
				             div  id="resultArea"
				 3.css:  .bgColor{  300*300  背景色随意}
						  .broders{ 10个像素实线红色边框  倒角画圆}
							 -->
							 <style>
							 .bgColor{
								width: 300px;
								height: 300px;
								background: #aaffff;
							}	
							 .broders{
								 border: 10px solid #fcd0ff;
								border-radius: 50%;
								}
							
							 </style>
				  <script src="../js/jquery-1.11.1.js"></script>
                
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		<script>
			//1.点击  添加类名 按钮  添加效果【样式】300*300 背景色红色
			$("#addClassBtn").click(function(){
				//div添加样式--存在样式
				$("#targetElement").addClass("bgColor");
				$("#resultArea").html("<h4>添加样式类名：bgColor</h4>")
			});
			//2. 点击 添加类名 按钮  添加效果【样式】
			// 300*300  背景色红色 圆  外层  10px黄色框
			$("#addClassBtn").click(function(){
				//div添加样式--存在样式
				$("#targetElement").addClass("bgColor broders");
				$("#resultArea").html("<h4>添加样式类名：bgColor</h4>")
			});
			// 3.点击  移除类名  按钮  
			$("#removeClassBtn").click(function(){
				//div添加样式--存在样式
				$("#targetElement").removeClass("broders");
				$("#resultArea").html("<h4>移除样式类名：bgColor</h4>")
			});
		   //4. 点击  切换类名 按钮 添加效果【样式】
		   // 300*300  背景色红色 圆  外层  10px黄色框
		   $("#toggleClassBtn").click(function(){
		   	//div添加样式--存在样式
		   	$("#targetElement").toggleClass("broders");
		   	$("#resultArea").html("<h4>切换样式类名：broders</h4>")
		   });
		   //5.点击  切换类名 按钮 添加效果【样式】
		   //去掉300*300 背景颜色红色
		   $("#toggleClassBtn").click(function(){
		   	//div添加样式--存在样式
		   	$("#targetElement").toggleClass("bgColor");
		   	$("#resultArea").html("<h4>切换样式类名：broders</h4>")
		   });
		   //6.检查类名是否存在：true存在  false不存在
		   $("#hasClassBtn").click(function(){
		   	//div添加样式--存在样式
		  var hc=$("#targetElement").hasClass("broders");
		   	$("#resultArea").text("检查当前样式是否存在:"+hc)
		   });
		</script>
	</body>
</html>